<template>
  <div class="form4">
    <ep-advance-card title="表单详情" theme="theme-1" class="c1"> 表单除了提交数据，有时也用于显示只读信息。 </ep-advance-card>
    <ep-form ref="form" class="form-container" name-width="100px" size="normal">
      <ep-advance-card class="c1">
        <div class="title">基本信息</div>
        <ep-divider></ep-divider>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="姓名：">Tom</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="性别：">男</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="城市：">上海</ep-form-item>
          </ep-col>
        </ep-row>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="生日：">1992-01-01</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="性别：">tom@163.com</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="城市：">上海浦东新区</ep-form-item>
          </ep-col>
        </ep-row>
      </ep-advance-card>
      <ep-advance-card class="c1">
        <div class="title">其他信息</div>
        <ep-divider></ep-divider>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="姓名：">Tom</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="性别：">男</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="城市：">上海</ep-form-item>
          </ep-col>
        </ep-row>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="生日：">1992-01-01</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="邮箱：">tom@163.com</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="城市：">上海浦东新区</ep-form-item>
          </ep-col>
        </ep-row>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="生日：">1992-01-01</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="邮箱：">tom@163.com</ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="城市：">上海浦东新区</ep-form-item>
          </ep-col>
        </ep-row>
      </ep-advance-card>
      <ep-advance-card class="c1">
        <div class="title">表格信息</div>
        <ep-divider></ep-divider>
        <ep-table :data="list" size="normal">
          <ep-table-item column="name" title="姓名"></ep-table-item>
          <ep-table-item column="sexName" title="性别"></ep-table-item>
          <ep-table-item column="address" title="城市"></ep-table-item>
          <ep-table-item column="email" title="邮箱"></ep-table-item>
        </ep-table>
      </ep-advance-card>
    </ep-form>
  </div>
</template>

<script>
export default {
  name: 'form4',
  data() {
    return {
      list: [
        {
          id: 1001,
          name: 'tom',
          sex: 'male',
          email: '13200000001@163.com',
          address: '浦东新区'
        },
        {
          id: 1002,
          name: 'tom',
          sex: 'male',
          email: '13200000001@163.com',
          address: '浦东新区'
        },
        {
          id: 1003,
          name: 'tom',
          sex: 'female',
          email: '13200000001@163.com',
          address: '浦东新区'
        },
        {
          id: 1004,
          name: 'tom',
          sex: 'male',
          email: '13200000001@163.com',
          address: '浦东新区'
        }
      ]
    }
  },
  mounted() {
    this.list.forEach(e => {
      if (e.sex == 'male') {
        this.$set(e, 'sexName', '男')
      } else {
        this.$set(e, 'sexName', '女')
      }
    })
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.form4 {
  .c1 {
    margin-bottom: 15px;
    .ep-row {
      margin-bottom: 0;
    }
  }
  .ep-divider--horizontal {
    margin: 18px 0;
  }
  /deep/.ep-table > tbody > tr {
    border-top: 1px solid #efefef;
  }
}
</style>
